Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More

@thi.ng/canvas

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@thi.ng/canvas

Canvas creation & HDPI support helpers


Version published
Weekly downloads
283
increased by124.6%
Maintainers
0
Weekly downloads
 
Created

@thi.ng/canvas

npm version npm downloads Mastodon Follow

[!NOTE] This is one of 198 standalone projects, maintained as part of the @thi.ng/umbrella monorepo and anti-framework.

🚀 Please help me to work full-time on these projects by sponsoring me on GitHub. Thank you! ❤️

About

Canvas creation & HDPI support helpers.

This package provides small frequently used helpers for HTML Canvas 2D creation & resizing:

Status

STABLE - used in production

Search or submit any issues for this package

Note: Some functions were previously part of the thi.ng/adapt-dpi and thi.ng/pixel packages, but have been migrated to this package for better/smaller re-use...

Installation

yarn add @thi.ng/canvas

ESM import:

import * as can from "@thi.ng/canvas";

Browser ESM import:

<script type="module" src="https://esm.run/@thi.ng/canvas"></script>

JSDelivr documentation

Package sizes (brotli'd, pre-treeshake): ESM: 348 bytes

Dependencies

None

Usage examples

25 projects in this repo's /examples directory are using this package:

ScreenshotDescriptionLive demoSource
Interactive & reactive image blurhash generatorDemoSource
Self-modifying, animated typographic grid with emergent complex patternsDemoSource
Polygon point classification (inside/boundary/outside)DemoSource
Shape conversions & operations using polygons with holesDemoSource
Embedding thi.ng/hiccup data/elements in thi.ng/geom shape hierarchiesDemoSource
geom-fuzz basic shape & fill examplesDemoSource
Iterating the unique edges of a tessellationDemoSource
Visualization of different grid iterator strategiesDemoSource
Basic hiccup-based canvas drawingDemoSource
Barnsley fern IFS fractal rendererDemoSource
Pixel buffer manipulationsDemoSource
Showcase of various dithering algorithmsDemoSource
Image dithering and remapping using indexed palettesDemoSource
Normal map creation/conversion basicsDemoSource
RGB waveform image analysisDemoSource
Animated, iterative polygon subdivisions & visualizationDemoSource
Port-Duff image compositing / alpha blendingDemoSource
Steering behavior drawing with alpha-blended shapesDemoSource
Entity Component System w/ 100k 3D particlesDemoSource
Visual comparison of biased vs. unbiased normal vectors projected on the surface of a sphereDemoSource
WebGL cube maps with async texture loadingDemoSource
WebGL instancing, animated gridDemoSource
WebGL MSDF text rendering & particle systemDemoSource
Minimal multi-pass / GPGPU exampleDemoSource
Interactively drawing to & reading from a WebGL offscreen render textureDemoSource

API

Generated API docs

TODO

Authors

If this project contributes to an academic publication, please cite it as:

@misc{thing-canvas,
  title = "@thi.ng/canvas",
  author = "Karsten Schmidt",
  note = "https://thi.ng/canvas",
  year = 2023
}

License

© 2023 - 2024 Karsten Schmidt // Apache License 2.0

FAQs

Package last updated on 22 Jul 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts